<template>
  <div>
    <!-- 按钮类型说明 -->
    <div class="demo-inner-divider">按钮类型</div>
    <div class="button">
      <div>
        <e-button type="primary">主按钮</e-button>
        <p>button-primary</p>
      </div>
      <div>
        <e-button type="secondary">二级按钮</e-button>
        <p>button-secondary</p>
      </div>
      <div>
        <e-button type="secondary" no-border>新-次按钮</e-button>
        <p>新规范：新-次按钮</p>
      </div>
      <div>
        <e-button type="error">危险按钮</e-button>
        <p>button-error</p>
      </div>
      <div>
        <e-button type="text">text按钮</e-button>
        <p>button-text</p>
      </div>
      <div>
        <e-button type="dashed">虚线按钮</e-button>
        <p>button-dashed</p>
      </div>
    </div>

    <!-- 长按钮说明 -->
    <div class="demo-inner-divider">长按钮</div>
    <div class="button-long">
      <div>
        <e-button type="primary" long>主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" long>二级按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" no-border long>新-次按钮</e-button>
      </div>
      <div>
        <e-button type="error" long>危险按钮</e-button>
      </div>
      <div>
        <e-button type="text" long>text按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" long>虚线按钮</e-button>
      </div>
    </div>

    <!-- 反白按钮 -->
    <div class="demo-inner-divider">反白按钮</div>
    <div class="button-ghost">
      <div>
        <e-button type="primary" ghost>主按钮</e-button>
      </div>
      <div>
        <e-button type="error" ghost>危险按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" ghost>虚线按钮</e-button>
      </div>
    </div>

    <!-- 按钮尺寸说明 -->
    <div class="demo-inner-divider">按钮尺寸</div>
    <div class="explainText">标准<span>button-primary</span></div>
    <div class="button">
      <div>
        <e-button type="primary">主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary">二级按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" no-border>新-次按钮</e-button>
      </div>
      <div>
        <e-button type="error">危险按钮</e-button>
      </div>
      <div>
        <e-button type="text">链接按钮</e-button>
      </div>
      <div>
        <e-button type="dashed">虚线按钮</e-button>
      </div>
    </div>
    <div class="explainText">中型<span>button-primary-middle</span></div>
    <div class="button">
      <div>
        <e-button type="primary" size="middle">主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" size="middle">二级按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" no-border size="middle">新-次按钮</e-button>
      </div>
      <div>
        <e-button type="error" size="middle">危险按钮</e-button>
      </div>
      <div>
        <e-button type="text" size="middle">链接按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" size="middle">虚线按钮</e-button>
      </div>
    </div>
    <div class="explainText">小型<span>button-primary-small</span></div>
    <div class="button">
      <div>
        <e-button type="primary" size="small">主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" size="small">二级按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" no-border size="small">新-次按钮</e-button>
      </div>
      <div>
        <e-button type="error" size="small">危险按钮</e-button>
      </div>
      <div>
        <e-button type="text" size="small">链接按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" size="small">虚线按钮</e-button>
      </div>
    </div>

    <!-- 按钮状态说明 -->
    <div class="demo-inner-divider">按钮状态</div>
    <div class="explainText">
      不可用<span>通过添加disabled属性可将按钮设置为不可用状态</span>
    </div>
    <div class="button">
      <div>
        <e-button type="primary" disabled>主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" disabled>二级按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" no-border disabled>新-次按钮</e-button>
      </div>
      <div>
        <e-button type="error" disabled>危险按钮</e-button>
      </div>
      <div>
        <e-button type="text" disabled>链接按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" disabled>虚线按钮</e-button>
      </div>
    </div>
    <div class="explainText">
      加载中<span>通过添加loading属性可以让按钮处于加载中状态</span>
    </div>
    <div class="button">
      <div>
        <e-button type="primary" loading>主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" loading>二级按钮</e-button>
      </div>
      <div>
        <e-button type="error" loading>危险按钮</e-button>
      </div>
      <div>
        <e-button type="text" loading>链接按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" loading>虚线按钮</e-button>
      </div>
    </div>

    <!-- 按钮形状 -->
    <div class="demo-inner-divider">按钮形状</div>
    <div class="explainText">
      <div class="button">
        <div>
          <e-button type="primary">主按钮</e-button>
        </div>
        <div>
          <e-button type="primary" shape="circle">主按钮</e-button>
        </div>
        <div>
          <e-button type="primary" icon="add"></e-button>
        </div>
        <div>
          <e-button type="primary" icon="add" shape="circle"></e-button>
        </div>
      </div>

    </div>
    <div class="explainText">
      <div class="button">
        <div>
          <e-button type="secondary">新-次按钮</e-button>
        </div>
        <div>
          <e-button type="secondary" shape="circle">新-次按钮</e-button>
        </div>
        <div>
          <e-button type="secondary" icon="add"></e-button>
        </div>
        <div>
          <e-button type="secondary" icon="add" shape="circle"></e-button>
        </div>
      </div>
    </div>
    <div class="explainText">
      <div class="button">
        <div>
          <e-button type="dashed">虚线按钮</e-button>
        </div>
        <div>
          <e-button type="dashed" shape="circle">虚线按钮</e-button>
        </div>
        <div>
          <e-button type="dashed" icon="add"></e-button>
        </div>
        <div>
          <e-button type="dashed" icon="add" shape="circle"></e-button>
        </div>
      </div>
    </div>

    <!-- 图标按钮 -->
    <div class="demo-inner-divider">图标按钮</div>
    <div class="explainText">
      ICON+文字描述<span>通过设置icon属性在Button内嵌入一个Icon</span>
    </div>
    <div class="button">
      <div>
        <e-button type="primary" icon="search">主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary" icon="search">二级按钮</e-button>
      </div>
      <div>
        <e-button type="error" icon="search">危险按钮</e-button>
      </div>
      <div>
        <e-button type="text" icon="search">链接按钮</e-button>
      </div>
      <div>
        <e-button type="dashed" icon="search">虚线按钮</e-button>
      </div>
    </div>

    <!-- ICON按钮 -->
    <div class="explainText">
      ICON<span>通过设置icon属性在Button内嵌入一个Icon</span>
    </div>
    <div class="button">
      <div>
        <e-button type="primary" shape="circle" icon="search"></e-button>
      </div>
      <div>
        <e-button type="secondary" shape="circle" icon="search"></e-button>
      </div>
      <div>
        <e-button type="error" icon="search"></e-button>
      </div>
      <div>
        <e-button type="text" icon="search"></e-button>
      </div>
      <div>
        <e-button type="dashed" icon="search"></e-button>
      </div>
    </div>

    <!-- tooltip相结合 -->
    <div class="demo-inner-divider">tooltip结合</div>
    <div class="button">
      <e-tooltip content="设计列表字段" placement="top">
        <e-button icon="a-setup" style="color:#337DFF"></e-button>
      </e-tooltip>
      <e-tooltip content="导出列表" placement="top">
        <e-button icon="download" style="color:#337DFF"> </e-button>
      </e-tooltip>
      <e-tooltip content="属性" placement="top">
        <e-button icon="restore" style="color:#337DFF"> </e-button>
      </e-tooltip>
    </div>

    <!-- 按钮组 -->
    <div class="demo-inner-divider">按钮组</div>
    <div class="explainText">
      单选按钮组<span>将多个 Button 放入 Button.Group 的容器中进行单选</span>
    </div>
    <div class="button">
      <div class="explainText">标准：</div>
      <e-button-group>
        <e-button type="primary">今天</e-button>
        <e-button type="primary">近7天</e-button>
        <e-button type="primary">近一个月</e-button>
      </e-button-group>
      <e-button-group>
        <e-button type="secondary">今天</e-button>
        <e-button type="secondary">近7天</e-button>
        <e-button type="secondary">近一个月</e-button>
      </e-button-group>
      <e-button-group>
        <e-button type="text">今天</e-button>
        <e-button type="text">近7天</e-button>
        <e-button type="text">近一个月</e-button>
      </e-button-group>
      <e-button-group>
        <e-button type="dashed">今天</e-button>
        <e-button type="dashed">近7天</e-button>
        <e-button type="dashed">近一个月</e-button>
      </e-button-group>
    </div>
    <div class="button">
      <div class="explainText">中：</div>
      <e-button-group size="middle">
        <e-button type="primary">今天</e-button>
        <e-button type="primary">近7天</e-button>
        <e-button type="primary">近一个月</e-button>
      </e-button-group>
      <e-button-group size="middle">
        <e-button type="secondary">今天</e-button>
        <e-button type="secondary">近7天</e-button>
        <e-button type="secondary">近一个月</e-button>
      </e-button-group>
      <e-button-group size="middle">
        <e-button type="text">今天</e-button>
        <e-button type="text">近7天</e-button>
        <e-button type="text">近一个月</e-button>
      </e-button-group>
      <e-button-group size="middle">
        <e-button type="dashed">今天</e-button>
        <e-button type="dashed">近7天</e-button>
        <e-button type="dashed">近一个月</e-button>
      </e-button-group>
    </div>
    <div class="button">
      <div class="explainText">小：</div>
      <e-button-group size="small">
        <e-button type="primary">今天</e-button>
        <e-button type="primary">近7天</e-button>
        <e-button type="primary">近一个月</e-button>
      </e-button-group>
      <e-button-group size="small">
        <e-button type="secondary">今天</e-button>
        <e-button type="secondary">近7天</e-button>
        <e-button type="secondary">近一个月</e-button>
      </e-button-group>
      <e-button-group size="small">
        <e-button type="text">今天</e-button>
        <e-button type="text">近7天</e-button>
        <e-button type="text">近一个月</e-button>
      </e-button-group>
      <e-button-group size="small">
        <e-button type="dashed">今天</e-button>
        <e-button type="dashed">近7天</e-button>
        <e-button type="dashed">近一个月</e-button>
      </e-button-group>
    </div>
    <div class="button">
      <div class="explainText">圆角：</div>
      <e-button-group shape="circle">
        <e-button type="primary">今天</e-button>
        <e-button type="primary">近7天</e-button>
        <e-button type="primary">近一个月</e-button>
      </e-button-group>
      <e-button-group shape="circle">
        <e-button type="secondary">今天</e-button>
        <e-button type="secondary">近7天</e-button>
        <e-button type="secondary">近一个月</e-button>
      </e-button-group>
      <e-button-group shape="circle">
        <e-button type="text">今天</e-button>
        <e-button type="text">近7天</e-button>
        <e-button type="text">近一个月</e-button>
      </e-button-group>
      <e-button-group shape="circle">
        <e-button type="dashed">今天</e-button>
        <e-button type="dashed">近7天</e-button>
        <e-button type="dashed">近一个月</e-button>
      </e-button-group>
    </div>
    <div class="button">
      <div class="explainText">图标：</div>
      <e-button-group>
        <e-button type="primary" icon="chevron-left">上一步</e-button>
        <e-button type="primary" icon="xinjian">新建</e-button>
        <e-button type="primary">
          下一步
          <e-icon type="chevron-right" />
        </e-button>
      </e-button-group>
      <e-button-group>
        <e-button icon="chevron-left">上一步</e-button>
        <e-button icon="xinjian">新建</e-button>
        <e-button>
          下一步
          <e-icon type="chevron-right" />
        </e-button>
      </e-button-group>
      <e-button-group>
        <e-button type="dashed" icon="chevron-left">上一步</e-button>
        <e-button type="dashed" icon="xinjian">新建</e-button>
        <e-button type="dashed">
          下一步
          <e-icon type="chevron-right" />
        </e-button>
      </e-button-group>
    </div>

    <!-- 按钮组纵向排序 -->
    <div class="explainText">
      按钮组纵向排列
      <span>通过设置ButtonGroup的属性vertical，可以使按钮组纵向排列</span>
    </div>
    <div class="button">
      <e-button-group vertical>
        <e-button type="primary">今天</e-button>
        <e-button type="primary">近7天</e-button>
        <e-button type="primary">近一个月</e-button>
      </e-button-group>
      <e-button-group vertical>
        <e-button type="secondary">今天</e-button>
        <e-button type="secondary">近7天</e-button>
        <e-button type="secondary">近一个月</e-button>
      </e-button-group>
      <e-button-group vertical>
        <e-button type="dashed">今天</e-button>
        <e-button type="dashed">近7天</e-button>
        <e-button type="dashed">近一个月</e-button>
      </e-button-group>
    </div>

    <!-- 按钮跳转 -->
    <!-- <div class="explainText">通过props to设置button按钮跳转</div>
    <div class="button">
      <e-button type="primary" to="radio">Radio</e-button>
      <e-button type="primary" to="radio" replace>Radio没有返回</e-button>
      <e-button type="primary" to="//www.baidu.com" target="_blank">百度</e-button>
    </div>
    <div class="button">
      <e-button to="radio">Radio</e-button>
      <e-button to="radio" replace>Radio没有返回</e-button>
      <e-button to="//www.baidu.com" target="_blank">百度</e-button>
    </div>
    <div class="button">
      <e-button type="text" to="radio">Radio</e-button>
      <e-button type="text" to="radio" replace>Radio没有返回</e-button>
      <e-button type="text" to="//www.baidu.com" target="_blank">百度</e-button>
    </div>
    <div class="button">
      <e-button type="dashed" to="radio">Radio</e-button>
      <e-button type="dashed" to="radio" replace>Radio没有返回</e-button>
      <e-button type="dashed" to="//www.baidu.com" target="_blank">百度</e-button>
    </div> -->

    <!-- 组合按钮 -->
    <div class="explainText">可用在同级多项操作，以按钮组合方式出现。</div>
    <div class="button">
      <e-dropdown>
        <e-button type="primary">
          更多操作
          <e-icon type="chevron-down"> </e-icon>
        </e-button>
        <template #list>
          <e-dropdown-menu>
            <e-dropdown-item>驴打滚</e-dropdown-item>
            <e-dropdown-item>炸酱面</e-dropdown-item>
            <e-dropdown-item disabled>豆汁儿</e-dropdown-item>
            <e-dropdown-item>冰糖葫芦</e-dropdown-item>
            <e-dropdown-item divided>北京烤鸭</e-dropdown-item>
          </e-dropdown-menu>
        </template>
      </e-dropdown>

    </div>

    <button-md class="markdown-body"></button-md>
  </div>
</template>

<script>
import buttonMd from '../../docs/button.md'
export default {
  name: 'buttonExamples',
  components: {
    buttonMd,
  },
  data() {
    return {}
  },
}
</script>

<style scoped>
.button {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}
.button-long {
  margin: 10px 0px;
}
.button-long > div {
  margin: 10px 0px;
}
.button-ghost {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  background-color: #212121;
  padding: 30px 30px;
}
.button-ghost > div {
  margin-right: 50px;
}
.explainText {
  display: flex;
  font-size: 14px;
  color: #6236ff;
  margin: 10px 0px;
}
.explainText > span {
  font-size: 12px;
  color: #6f7d96;
  padding-left: 10px;
}
.button > div {
  margin-right: 50px;
}
.button p {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: #6f7d96;
  margin-bottom: 10px;
}
</style>
